<template >
  <div @click="$router.push('/particulars?id=' + postData.id)">
    <div
      class="gossip"
      v-if="
        postData.type == 1 &&
        postData.cover.length >= 1 &&
        postData.cover.length < 3
      "
    >
      <span class="gossiptitle">
        <p>{{ postData.title }}</p>
        <span class="info">
          <span>{{ postData.user.nickname }}</span>
          {{
            postData.comments
              ? postData.comments.length
              : postData.comment_length
          }}跟帖
        </span>
      </span>
      <br />

      <img :src="postData.cover[0].url" alt />
    </div>

    <div
      class="gossiptwo"
      v-if="postData.type == 1 && postData.cover.length >= 3"
    >
      <p class="title">{{ postData.title }}</p>
      <div class="gossiptwotitle">
        <img :src="postData.cover[0].url" alt />
        <img class="center" :src="postData.cover[1].url" alt />
        <img :src="postData.cover[2].url" alt />
      </div>
      <span class="info">
        <span>{{ postData.user.nickname }}</span>
        {{
          postData.comments
            ? postData.comments.length
            : postData.comment_length
        }}跟帖
      </span>
    </div>

    <div
      class="gossipthree"
      v-if="postData.type == 2 && postData.cover.length >= 1"
    >
      <p class="title">{{ postData.title }}</p>
      <div class="video">
        <img :src="postData.cover[0].url" alt />
        <span class="iconfont iconshipin"></span>
      </div>
      <span class="info">
        <span>{{ postData.user.nickname }}</span>
        {{
          postData.comments
            ? postData.comments.length
            : postData.comment_length
        }}跟帖
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postData"],
};
</script>

<style lang="less" scoped>
.gossip {
  display: flex;

  padding: 10/360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .gossiptitle {
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    width: 200/360 * 100vw;
    font-size: 16/360 * 100vw;
  }
  .info {
    font-size: 13/360 * 100vw;
    color: #868686;
    display: inline-block;
    margin-top: 20/360 * 100vw;
  }
  img {
    margin: 0 auto;
    width: 112/360 * 100vw;
    height: 74/360 * 100vw;
  }
}
.gossiptwo {
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;

  padding: 10/360 * 100vw;
  font-size: 16/360 * 100vw;
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .gossiptwotitle {
    padding-top: 10/360 * 100vw;
    img {
      width: 112/360 * 100vw;
      height: 74/360 * 100vw;
    }
    .center {
      margin: 0 2/360 * 100vw;
    }
  }
  .info {
    font-size: 13/360 * 100vw;
    color: #868686;
    display: inline-block;
    margin-top: 10/360 * 100vw;
  }
}
.gossipthree {
  padding: 10/360 * 100vw;
  font-size: 16/360 * 100vw;
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .video {
    position: relative;
    display: flex;

    img {
      width: 340/360 * 100vw;
      height: 170/360 * 100vw;
      background-color: #0a0;

      margin: 0 auto;
    }
    .iconshipin {
      position: absolute;
      text-align: center;
      line-height: 40/360 * 100vw;
      font-size: 40/360 * 100vw;
      color: #fff;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      margin-top: -20 /360 * 100vw;
      margin-left: -20 /360 * 100vw;
      width: 40/360 * 100vw;
      height: 40/360 * 100vw;
      background-color: #dddd;
    }
  }
  .info {
    font-size: 13/360 * 100vw;
    color: #868686;
    display: inline-block;
    margin-top: 10/360 * 100vw;
  }
}
</style>